<template>
  <div class="licenseWrapper">
      <el-select
              v-model="value2"
              multiple
              filterable
              remote
              :disabled="!editable"
              :remote-method="remoteMethod"
              placeholder=""
              ref="select"
              :loading="loading"
      >
        <el-option v-for="(item, index) in options" :key="item.value" :value="item.value" :label="item.label">
        </el-option>
      </el-select>
  </div>
</template>

<script lang="ts">
import {Vue, Emit, Prop, Inject, Provide, Component, Watch} from "vue-property-decorator";
import {LicenseEntity} from "../../../plugins/dto";
import {BrandResponseDto, CommonPageResponse} from "../../../../../utils/types";
import masterModal from "../../../../../api/module/masterModal";
import {OptionType} from "../CommodityClassify/type";
import {fieldProps} from "../../MainDisplay/InfoPreview";


@Component({
    model: {
        prop: "propValue",
        event: "update"
    }
})
export default class LicenseSelect extends Vue {
    value2:string[]=[];
    private loading:boolean=false;
    private options:OptionType[]=[];
    private staticOption:OptionType[]=[];
    @Prop({default:{}})item!:fieldProps
    @Prop({default:[]})propValue!:LicenseEntity[]
    @Prop({default:true})editable!:boolean
    @Emit("update")
    handleUpdate(value:LicenseEntity[]){
        return value
    }
    @Emit("change")
    changeUpdate(value:LicenseEntity[]){
        return value
    }
    async remoteMethod(query:string){
        if(query !== ''){
            this.loading = true
            const res:CommonPageResponse<LicenseEntity> = await masterModal.getLicenseList({currentPage:1, pageSize:50, keyword:query})
            this.loading =false
            if(res.code === 200 && res.data.records.length){
                this.options = res.data.records.map(item => {
                    return {label:item.licenseCode, value:item.licenseStandardCode, licenseTable:item.licenseTable,managementCategory:item.managementCategory}
                })
            }
            const data:OptionType[] = this.options.concat(this.staticOption)
            const uniqueByValue:OptionType[] = Array.from(new Map(data.map(item => [item.value, item])).values());
            this.options = uniqueByValue
        }
    }

    // @Watch("propValue", {immediate: true, deep: true})
    // handlePropValue(value:LicenseEntity[]){
    //     const values = value.map(item => (item.licenseStandardCode))
    //     let options:OptionType[] = []
    //     value.forEach(item => {
    //         let o:OptionType = {
    //             label: "",
    //             value: ""
    //         }
    //         o.label = item.licenseCode
    //         o.value = item.licenseStandardCode
    //         options.push(o)
    //     })
    //     this.options = options
    //     this.staticOption = options
    //     this.value2 = values
    // }
    @Watch("item", {immediate: true, deep: true})
    onItemChange(newValue:fieldProps) {
        //@ts-ignore
        this.staticOption = newValue[newValue.key]?.map(j=>({label:j.licenseCode, value:j.licenseStandardCode, licenseTable:j.licenseTable, managementCategory:j.managementCategory}))
        //@ts-ignore
        this.options = newValue[newValue.key]?.map(j=>({label:j.licenseCode, value:j.licenseStandardCode, licenseTable:j.licenseTable,managementCategory:j.managementCategory}))
        //@ts-ignore
        this.value2 = newValue[newValue.key]?.map(j=>j.licenseStandardCode)
    }
    @Watch("value2")
    handleValueChange(value:string[], old:string[]){
      console.log(22222000, value, old)
        if(value.length !== old?.length){
            const res:OptionType[] = this.options.filter(item => value.includes(item.value))
            let licenseList:LicenseEntity[] = []
              res.forEach(item => {
                let o:LicenseEntity = {
                  licenseCode: "",
                  licenseStandardCode: "",
                  licenseTable: "",
                  id:"",
                  standardCode: "",
                  managementCategory:''
                }
                o.licenseStandardCode = item.value
                o!.licenseTable = item.licenseTable as string
                o!.managementCategory = item.managementCategory as string
                o.licenseCode = item.label
                licenseList.push(o)
              })
            this.handleUpdate(licenseList)
            this.changeUpdate(licenseList)
        }
    }

    mounted() {
      setTimeout(()=>{
        const textDoms = document.querySelectorAll('.el-select__tags') as NodeListOf<HTMLElement>; // 明确类型  
        textDoms.forEach(item => {  
          const targetDom = item?.children[0]?.children[0]?.children[0] || null
          if (!targetDom) return; //
          const textContent = targetDom.textContent || '';  
          targetDom.setAttribute("title", textContent);  
        });
      }, 300)
    }
    
  focus(){
    //@ts-ignore
    this.$refs.select.focus()
  }
}
</script>

<style scoped lang="scss">
.licenseWrapper{
  width: 80%;
  ::v-deep .el-input__inner {
    height: 32px;
    border:none;
    padding: 0
  }
  ::v-deep .el-select__input{
    margin-left: 0;
  }
  ::v-deep .el-input.is-disabled .el-input__inner{
    background: #fff;
    color: #606266
  }

  ::v-deep .el-select__tags{
    width: unset !important;
    max-width: 240px !important;
  }
}
</style>